<template>
  <el-dialog
    title="员工信息"
    v-model="dialogVisible"
    width="80%"
    @close="handleClose"
  >
    <el-table
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
      :data="tableData"
      stripe
      style="width: 100%"
      highlight-current-row
      :row-class-name="rowClassName"
      show-overflow-tooltip
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column prop="applicationPositonName" label="岗位名称" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          {{ scope.row.sex === 0 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column prop="educationalBackground" label="学历" />
      <el-table-column prop="profession" label="专业" />
      <el-table-column prop="requireDeptName" label="需求部门" />
    </el-table>

    <Pagination
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Pagination from "@/components/Pagination/pageination.vue";
import { ref, defineEmits, defineExpose, onMounted } from "vue";
import { EmployeeList } from "@/api/index.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  pitchId: {
    type: Number,
    default: null, // 修正默认值为 null
  },
});
const tableData = ref([]);
const dialogVisible = ref(false);
const multipleTableRef = ref(null);
const emit = defineEmits(["update:selected"]);

const searchForm = reactive({
  status: 2,
  pageSize: 10,
  pageNum: 1,
});

const pagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

const multiSelectionIds = ref(null);
const callbackFunction = ref(null);

onMounted(() => {
  fetchList();
});

const fetchList = () => {
  EmployeeList(searchForm)
    .then((res) => {
      if (res.data.records && res.data.records.length > 0) {
        tableData.value = res.data.records || [];
        pagination.total = res.data.total || 0;
      }
    })
    .catch(() => {
      tableData.value = [];
      pagination.total = 0;
    });
};

const handleSelectionChange = (selection) => {
  multiSelectionIds.value = selection.map((item) => item.id);
};

const openDialog = (callback = null) => {
  callbackFunction.value = callback;
  dialogVisible.value = true;
};

const handleSubmit = () => {
  if (multiSelectionIds.value && multiSelectionIds.value.length > 0) {
    emit("update:selected", multiSelectionIds.value);
    dialogVisible.value = false;
    multipleTableRef.value?.clearSelection();
    if (callbackFunction.value) {
      callbackFunction.value(multiSelectionIds.value);
    }
  } else {
    ElMessage.warning("请选择至少一个员工");
  }
};

const handleCancel = () => {
  dialogVisible.value = false;
  multiSelectionIds.value = null;
  multipleTableRef.value?.clearSelection();
};

const handleClose = () => {
  handleCancel();
};

const handleSizeChange = (size) => {
  pagination.limit = size;
  searchForm.pageSize = size;
  fetchList();
};

const handleCurrentChange = (currentPage) => {
  pagination.page = currentPage.page;
  searchForm.pageNum = currentPage.page;
  fetchList();
};
// 新增禁用行判断逻辑
const checkSelectable = (row) => {
  // 当 pitchId 有效时禁用匹配行
  return props.pitchId !== null && props.pitchId !== undefined
    ? row.id !== props.pitchId
    : true;
};

// 可选：添加禁用行样式
const rowClassName = ({ row }) => {
  return row.id === props.pitchId ? "disabled-row" : "";
};
defineExpose({
  open: openDialog,
});
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

/* 禁用行样式 */
:deep(.el-table__row.disabled-row) {
  cursor: not-allowed;
  opacity: 0.6;

  /* 禁用悬浮效果 */
  &:hover td {
    background-color: inherit !important;
  }

  /* 隐藏选择框 */
  .el-checkbox {
    display: none;
  }
}

:deep(.el-table__row) {
  height: 60px;
  padding: 0px 20px;
  color: var(--Primary4-800, #383D48);
  font-family: "Source Han Sans CN";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
</style>
